<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Hello AngularJS</title>
    <script src="//cdn.bootcss.com/angular.js/1.4.3/angular.js"></script>
    <script>
    var app = angular.module('MyApp', []);
    
    app.controller('MyController',function($scope){
        $scope.persion = {
            name: "World"
        };
        $scope.usename = 'World';
        $scope.sayHello = function() {
            $scope.greeting = 'Hello '+ $scope.username + '!';
        }
    });
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-init="quantity=2;price=5;names=['Tom','Jerry','Gaffey'];Hello='Hello World';click=false">
        {{Hello}}
        <hr>
        <p>总价：{{ quantity * price }}</p>
        <hr>
        <p>姓名：{{ names[1] }}</p>
        <hr>
        <p>请输入任意值：<input type="text" ng-model="yourName" /></p>
        <p>你输入的为：{{yourName}}</p>
        <hr>
 <!--        <p>请输入一个名字：<input type="text" ng-model="name" /></p>
        <p>Hello <span ng-bind="name"></span></p> -->
        <hr>
        <buttion ng-click="click=!click">隐藏/显示</buttion>
        <div ng-hide="click">
            <p>请输入一个名字：<input type="text" ng-model="name" /></p>
            <p>Hello <span ng-bind="name"></span></p>
        </div>
        <hr>
        <div ng-controller="MyController">
            <p>请输入一个名字：<input type="text" ng-model="persion.name" /></p>
            <p>Hello <span ng-bind="persion.name"></span></p><br>

            <p>Your name:<input type="text" ng-model="username" /></p>
            <button ng-click="sayHello()">打招呼</button>
            <hr>
            {{greeting}}
            
        </div>

    </div>
</body>
</html>